//es6映入echarts方式
import * as echarts from 'echarts';

require('../css/echarts.less');

//导入axios
const axios = require('../utils/http.js');

window.onload = () => {

  let BASE_URL = 'http://47.96.154.185:3701';
  let sportTimeAll = document.querySelector('.total_time_num');
  let sportconsumeAll = document.querySelector('.total_calorie_num');

  let herdImg = document.querySelector('.mydata_tit img');

  let dayAll = document.querySelector('.cumulative_num');

  let iconfont = document.querySelector('#iconfont');

  //返回按钮
  iconfont.addEventListener('click',function(){
    location.href='./mine.html';
  })

  //头像刷新
  axios.get('/api/user/info').then(function (res) {
    // console.log(res);
    let data = res.data.data;
    herdImg.src = BASE_URL + data.imgUrl;
  })

  //运动数据渲染
  axios.get('/api/exercise').then(res => {
    let soprtData = res.data.data;
    console.log(soprtData);

    //总运动时长
    sportTimeAll.textContent = soprtData.sum7Duration;
    //总消耗
    sportconsumeAll.textContent = soprtData.sum7Calorie;
    //累计天数
    dayAll.textContent = soprtData.days.length;

    //图表渲染
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), null, {
      width: 350,
      height: 250
    });

    // 指定图表的配置项和数据
    var option = {
      grid:{
        show:false,
        top:'25%',
        right:'5%',
        bottom:'25%',
        left:'20%'
    },
      title: {
        text: '近七天运动时长'
      },
      xAxis: {
        type: 'category',
        data: [soprtData.days[0].date, soprtData.days[1].date,
        soprtData.days[2].date, soprtData.days[3].date, soprtData.days[4].date,
        soprtData.days[5].date, soprtData.days[6].date]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [soprtData.days[0].sumDuration, soprtData.days[1].sumDuration,
          soprtData.days[2].sumDuration, soprtData.days[3].sumDuration,
          soprtData.days[4].sumDuration, soprtData.days[5].sumDuration,
          soprtData.days[6].sumDuration],
          type: 'bar',
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));

    // 指定图表的配置项和数据
    var option = {
    
      title: {
        text: '运动分类',
        subtext: 'Keep Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      // legend: {
      //   orient: 'vertical',
      //   left: 'left',
        
      // },
      series: [
        {
          center:['50%','60%'],
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            // { value: 1048, name: 'Search Engine' },
            // { value: 735, name: 'Direct' },
            { value: soprtData.sum7Calorie + 10000, name: '跑步' },
            { value: soprtData.sum7Duration, name: '骑行' },
            { value: soprtData.sum7Meter, name: '训练' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })

  
 

};
